<template>
  <el-container class="main-box">
    <el-aside width="300px">
      <div style="padding: 20px;">
        <!-- <department-book :float_list="float_list" :is_hide="is_hide" @handleTop="handleTop" @handleDuty="handleDuty" />-->
        <el-input v-model="search_name" @input="searchInput" placeholder="请输入部门、人员">
          <i slot="prefix" class="el-input__icon el-icon-search"/>
        </el-input>

        <TreeView :treeData="treeData" @onTreeClick="handleDuty"/>
      </div>

    </el-aside>
    <el-main ref="Box">
      <el-scrollbar class="person_body">
      <div v-show="personal_or_department === 0">
        <div class="kong-state" v-if="!department_duty_list.length">
          <div class="flex f-dir align-center kong-box">
            <img class="kong" src="@/assets/appraise/icon/kongzhuangtai.png" alt=""/>
            <div class="kong-text">选择后再查看内容哦~</div>
          </div>
        </div>
        <div class="my-duty" v-show="department_duty_list.length">
          <div class="box-card">
            <div class="card-head">
              <module-header content="部门职责" :time="department_dutyYear"/>
            </div>
            <eit-content router_type="duty" :text="department_duty_list"/>
          </div>
        </div>
        <div v-if="default_state || index<1" v-for="(item, index) in department_duty_all_copy" :key="index" class="my-duty-list">
          <div class="box-card" :style="index !== time_value.length - 1 ? 'margin-bottom: 14px;' : ''">
            <div class="card-head">
              <module-header content="部门职责" :time="item.dutyYear"/>
            </div>
            <eit-content router_type="duty" :text="item.contentList"/>
            <div class="kong-text" v-if="!item.contentList.length">暂无内容</div>
          </div>
        </div>
        <!--          时间选择器-->
        <div v-show="department_duty_list.length" class="time-select-box">
          <div class="time-select-head">更多年度职责</div>
          <el-select @change="handleSelectTime" v-model="time_value" multiple
                     placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div v-show="personal_or_department === 1">
        <div class="kong-state" v-if="!man_duty.length">
          <div class="flex f-dir align-center kong-box">
            <img class="kong" src="@/assets/appraise/icon/kongzhuangtai.png" alt=""/>
            <div class="kong-text">选择后再查看内容哦~</div>
          </div>
        </div>
        <div class="my-duty" v-show="man_duty.length">
          <div class="box-card">
            <div class="card-head">
              <module-header :name="user_name" content="我的职责"/>
            </div>
            <eit-content router_type="duty" :text="man_duty"/>
          </div>
        </div>
        <div class="my-duty-list" v-show="department_duty_list.length" style="margin-bottom: 14px">
          <div class="box-card">
            <div class="card-head">
              <module-header content="所在部门职责" :time="department_dutyYear"/>
            </div>
            <eit-content router_type="duty" :text="department_duty_list"/>
            <div class="kong-text" v-if="!department_duty_list.length">暂无内容</div>
          </div>
        </div>
      </div>
      <div v-show="personal_or_department === -1">
        <div class="kong-state" v-if="!man_duty.length && !department_duty_list.length">
          <div class="flex f-dir align-center kong-box">
            <img class="kong" src="@/assets/appraise/icon/kongzhuangtai.png" alt=""/>
            <div class="kong-text">选择后再查看内容哦~</div>
          </div>
        </div>
      </div>
      </el-scrollbar>
    </el-main>
  </el-container>
</template>

<script>
import ModuleHeader from '@/appraise/components/ModuleHeader'
import HeaderFeatures from '@/appraise/components/HeaderFeatures'
import EitContent from '@/appraise/components/EitContent'
import MailList from '@/appraise/components/MailList'
import DepartmentBook from '@/appraise/components/DepartmentBook'
import { syncRequest } from '@/utils/httpRequet'

import TreeView from '@/appraise/components/TreeView'
import { throttle } from 'throttle-debounce'

export default {
  name: 'Inquire', //职责查询
  components: {
    ModuleHeader,
    HeaderFeatures,
    EitContent,
    MailList,
    DepartmentBook,
    TreeView
  },
  data() {
    return {
      is_hide: false,
      personal_or_department: -1, //人员或部门职责
      man_duty: [],
      user_name: '',
      department_duty_list: [], //部门职责列表
      department_dutyYear: '', //部门职责年份
      department_duty_all_list: [], //获取所有年份职责
      department_duty_all_copy: [], //获取其他年份职责
      float_list: {},
      search_name: '',  // 搜索 词
      options: [], //时间选择器
      time_value: [], //选中时间

      treeData: [],
      default_state: false,
    }
  },

  mounted() {
    this.GetDeptUserTree()
  },
  methods: {
    searchInput: throttle(500, function(keyword){
      if (keyword) {
        const res = syncRequest({
          url: 'queryDeptUserTree',
          data: { orgId: '', name: keyword }
        })
        this.float_list = res.data

        this.treeData = res.data
      } else {
        this.GetDeptUserTree()
      }
    }),
    addOpen(arr) {
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i]
        if (item.children) {
          item.open = true
          // item.icon = 'http://dryl.isart.me/1601265555536onvhoghf.png'
         this. addOpen(item.children)
        }
      }
    },
    GetDeptUserTree() {
      const dept_user_tree = syncRequest({
        url: 'pubGetDeptUserTree',
        data: { orgId: '' }
      })

      this.float_list = dept_user_tree.data

      const data = dept_user_tree.data    // 递归增加 open: true
      this.treeData = data
      return

      this.float_list = dept_user_tree.data[0]
      if (dept_user_tree.errorCode === '1') {
        this.$set(this.float_list, 'is_unfold', true)
        this.float_list.children.forEach(res => {
          this.$set(res, 'is_unfold', false)
        })
      }
    },
    deptGet(id) {
      //获取部门今年职责
      const department_duty = syncRequest({
        url: 'deptGet',
        data: {
          deptId: id,
          year: ''
        }
      })
      const errorCode = department_duty.errorCode === '1'
      this.department_duty_list = errorCode ? department_duty.data.contentList : []
      if (errorCode) {
        this.department_duty_list.forEach(res => {
          this.$set(res, 'is_eit', false)
        })
        this.department_dutyYear = department_duty.data.dutyYear
        if(this.personal_or_department === 0) {
          this.$message({
            message: '已切换为' + department_duty.data.deptName + '的职责',
            type: 'success',
            duration: 2000,
            center: true
          })
        }
      } else {
        setTimeout(() => {
          this.$message({
            message: '暂未添加今年部门职责',
            type: 'warning',
            duration: 2000,
            center: true
          })
        }, 500)
      }
    },
    /**
     * @name 人员职责
     */
    handleDuty(e) {
      this.options = []
      this.time_value = []
      this.man_duty = []
      this.department_duty_all_list = []
      this.department_duty_all_copy = []
      this.default_state = false
      // this.personal_or_department = e.type == 1 ? 1 : 0
      this.personal_or_department = e.isParent ?  0 : 1   // 判断点击了 部门 or 个人

      if (this.personal_or_department === 1) {
        //获取个人今年职责
        const my_duty = syncRequest({
          url: 'userGet',
          data: {
            userId: e.id,
            year: ''
          }
        })
        if (my_duty.errorCode === '1') {
          this.man_duty = my_duty.data.contentList
          this.man_duty.forEach(res => {
            this.$set(res, 'is_eit', false)
          })
          this.user_name = my_duty.data.userName
          this.$message({
            message: '已切换为' + this.user_name + '的职责',
            type: 'success',
            duration: 2000,
            center: true
          })
        } else if (my_duty.errorCode === '-5') {
          this.man_duty = []
          this.$message({
            message: '今年暂未个人添加职责',
            type: 'warning',
            duration: 2000,
            center: true
          })
        }
        //获取部门今年职责
        this.deptGet(e.pid)
      } else {
        //获取部门今年职责
        this.deptGet(e.id)
        //获取部门所有职责
        const department_duty_all = syncRequest({
          url: 'deptGetAll',
          data: {
            deptId: e.id,
            year: ''
          }
        })
        const errorCode = department_duty_all.errorCode === '1'
        this.department_duty_all_list = errorCode ? department_duty_all.data : []
        if (errorCode) {
          this.department_duty_all_list.splice(0, 1)
          this.department_duty_all_copy =  this.department_duty_all_list
          this.department_duty_all_list.forEach((res, index) => {
            const item1 = {
              value: res.dutyYear,
              label: res.dutyYear
            }
            this.options.push(item1)
          })
        }
      }
    },
    /**
     * @name 选择时间
     */
    handleSelectTime(e) {
      this.department_duty_all_copy = []
      if (!this.time_value.length) {
        this.default_state = false
        this.department_duty_all_copy =  this.department_duty_all_list
        return
      }
      this.default_state = true
      this.time_value.forEach(res => {
        this.department_duty_all_list.forEach(result => {
          if (result.dutyYear == res) {
            this.department_duty_all_copy.push(result)
          }
        })
      })
    },
  }
}
</script>

<style scoped lang="scss">
.el-aside {
  background-color: #FFFFFF;
  color: #333;
  padding:0;
  margin-right: 10px;
}
.el-main {
  background-color: #F0F0F3;
  color: #333;
}
.main-box {
  background-color: #F0F0F3;
  user-select: none;
  padding: 12px 0 12px 12px;
}
.flex {
  display: flex;
}

.align-center {
  align-items: center;
}
::v-deep .el-scrollbar__wrap {
  height: 100%;
  overflow-x: auto;
}
.flex-1 {
  flex: 1;
}
/*空状态样式*/
.kong-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kong {
  width: 190px;
  height: 190px;
  margin-bottom: 30px;
}

.kong-box {
  position: relative;
  top: 31px;
}
.f-dir {
  flex-direction: column;
}

.my-duty {
  padding-bottom: 12px; margin-right: 12px; border-radius: 4px;
  position: relative;
}
.my-duty-list {
  margin-right: 12px; border-radius: 4px;
  position: relative;
}
::v-deep .el-select {
  height: 36px;
}
::v-deep .el-input__inner {
  height: 36px !important;
}
::v-deep .el-select__tags {
  max-width: 140px !important;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.box-card {
  width: 100%;
  background-color: #ffffff;
  padding: 10px; border-radius: 4px;
}
.min-h-39 {
  min-height: 100vh;
}
.card-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.person_body{ width: 100%; height: 100%; }


.kong-text {
  font-size: 18px;
  color: rgba(153, 153, 153, 1);
}

.time-select-box {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  border-radius: 6px;
  position: absolute;
  top: 1.35rem;
  right: 1.3rem;
}

.time-select-head {
  user-select: none;
  font-size: 16px;
  color: #666666;
  margin-right: 12px;
}

@media (max-width: 1024px) {
  .time-select-head {
    user-select: none;
    font-size: 14px;
    color: #666666;
    margin-right: 12px;
  }
}
</style>
